<template>
  <div class="page  w-1200">
    <div class="header-box">
      <img class="home-icon" src="@/static/easydrug/allProducts/home_icon.png" />
      <span class="home-text">首页</span>
      <img class="right-icon" src="@/static/easydrug/allProducts/right_icon.png" />
      <span class="title">全部商品</span>
    </div>

    <el-form :model="queryForm" :inline="true" ref="queryForm" label-width="80px" class="query-form">
      <el-form-item label="助记码:">
        <el-input v-model="queryForm.goodsCode" placeholder="请输入" @blur="getData"></el-input>
      </el-form-item>
      <el-form-item label="产品名称:">
        <el-input v-model="queryForm.goodsName" placeholder="请输入"  @blur="getData"></el-input>
      </el-form-item>
      <el-form-item label="厂家:">
        <el-input v-model="queryForm.manufacturer" placeholder="请输入"  @blur="getData"></el-input>
      </el-form-item>
      <el-form-item label="批准文号:">
        <el-input v-model="queryForm.approvalNumber" placeholder="请输入"  @blur="getData"></el-input>
      </el-form-item>
      <el-form-item label="商品分类:">
        <el-select v-model="queryForm.typeId" placeholder="请选择" @change="getData" >
    <el-option
      v-for="item in categoryList"
      :key="item.typeId"
      :label="item.typeName"
      :value="item.typeId">
    </el-option>
  </el-select>
      </el-form-item>
    </el-form>
    <div class="conditions">
      <div class="condition">
        <div class="btn" :class="{ 'btn-active': selCondition == '' }" @click="selBtn('')">综合</div>
        <div class="btn" :class="{ 'btn-active': selCondition == 'salesVolume' }"  @click="selBtn('salesVolume')">销量</div>
        <!-- <div class="btn" :class="{ 'btn-active': selCondition == 'XP' }"  @click="selBtn('XP')">新品</div> -->
        <div class="btn" :class="{ 'btn-active': selCondition == 'retailPrice' }"  @click="selBtn('retailPrice')">价格</div>
        <div class="sort-icon">
          
          <img class="up-icon" v-if="queryForm.isAsc == 'desc'"  @click="setSort('asc')" src="@/static/easydrug/allProducts/up_default.png" />
          <img class="up-icon" v-else @click="setSort('asc')" src="@/static/easydrug/allProducts/up_sel.png" />

         
          <img class="down-icon"  v-if="queryForm.isAsc == 'asc'"   @click="setSort('desc')" src="@/static/easydrug/allProducts/down_default.png" />
          <img class="down-icon"  v-else @click="setSort('desc')" src="@/static/easydrug/allProducts/down_sel.png" />

          <!-- <i class="el-icon-caret-top default-icon" :class="{'active-icon':curOrder=='Descending'}" @click="setOrder('Ascending')"></i>
          <i class="el-icon-caret-bottom default-icon" :class="{'active-icon':curOrder=='Ascending'}"  @click="setOrder('Descending')"></i> -->
        </div>
        <!-- <div class="sort-icon">
          <img class="up-icon" src="@/static/easydrug/allProducts/up_default.png" />
          <img class="down-icon" src="@/static/easydrug/allProducts/down_sel.png" />
        </div> -->
      </div>
      <div class="result-box">
        <span class="result">共<span class="total">{{ page.total }}</span>件商品</span>
        <span class="paging"><span class="current">{{ current }}</span>/{{ total }}</span>
        <img class="left-img" src="@/static/easydrug/allProducts/left_img.png" />
        <img class="right-img" src="@/static/easydrug/allProducts/right_img.png" />
      </div>
    </div>
    <productList :productList="productList"></productList>
    <pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
      :page-size="page.size" :total="page.total"></pagination>
  </div>
</template>
<script>

import productList from "../common/components/productList.vue";
import pagination from "../common/components/pagination.vue";
export default {
  name: "allproducts",
  components: {
    productList,
    pagination
  },
  data() {
    return {
      queryForm: {
        goodsCode: '',
        goodsName: '',
        manufacturer: '',
        approvalNumber: '',
        typeId: '',
        orderByColumn:'',
        isAsc:''
      },
      selCondition: '',
      productList: [],
      page: {
        size: 10,
        page: 1,
        total: 100,
        pageCount: 10
      },
      current:1,
      total:2,
      curOrder:'Ascending',
      id:0,
      categoryList:[]
    };
  },
  computed: {

  },
  watch: {},
  created() {
    this.getCategoryList();
    this.getData();
    // this.initData();
    this.queryForm.typeId = this.$route.query.id? (+this.$route.query.id):'';
  },
  methods: {
    setSort(val){
      this.queryForm.isAsc = val;
      this.getData();
    },
    getCategoryList() {
      this.$httpApi("/api/v1/index/medicine/type", {
        },
         "get"
      ).then(res => {
        this.categoryList = res.data;
      })
    },
    getData(){
      this.$httpApi("/api/v1/goods/list", {
              goodsCode: this.queryForm.goodsCode == '' ? null: this.queryForm.goodsCode,
              goodsName: this.queryForm.goodsName == '' ? null: this.queryForm.goodsName,
              manufacturer: this.queryForm.manufacturer == ''? null: this.queryForm.manufacturer,
              approvalNumber: this.queryForm.approvalNumber == ''? null: this.queryForm.approvalNumber,
              typeId: this.queryForm.typeId == ''? null: this.queryForm.typeId,
              orderByColumn: this.queryForm.orderByColumn == ''? null: this.queryForm.orderByColumn,
              isAsc: this.queryForm.isAsc == ''? null: this.queryForm.isAsc,
              pageNum: this.page.page,
              pageSize:20
            },
             "get"
          ).then(pres=>{
            pres.rows.map(n=>{
              n.num = 1;
            })
            this.productList = pres.rows;
            this.page.total = pres.total  
          })
    },
    initData() {
      let productList = []
      for (let i = 0; i < 20; i++) {
        productList.push({
          img: require("@/static/easydrug/homePage/common.png"),
          name: "布洛芬缓释胶囊",
          tablet: '0.8G*64片(盒)',
          soldCount: 800,
          price: 39.50,
          retailPrice: 49.80,
          companyName: '江中药业股份有限公司',
          effectiveDate: '2026-02-28',
          num: 10,
          hotRecommentingCount: 543
        })
      }
      this.productList = productList
    },
    handleSizeChange(curSize) {
      this.page.size = curSize
      console.log("curSize==", curSize)
    },
    handleCurrentChange(currentPage) {
      this.page.page = currentPage
      console.log("currentPage==", currentPage)
    },
    selBtn(active){
      this.queryForm.orderByColumn = active;
      this.selCondition = active;
      this.getData();
    },
    setOrder(order){
      this.curOrder = order
    }
  },
};
</script>

<style scoped lang="less">
.w-1200{
  width: 1200px;
  margin: auto;
}
.page {
  padding-top: 20px;
  padding-bottom: 70px;

  .header-box {
    .home-icon {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }

    .home-text {
      margin-left: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(153, 153, 153, 1);
      vertical-align: middle;
    }

    .right-icon {
      margin-left: 8px;
      width: 5px;
      height: 10px;
      vertical-align: middle;
    }

    .title {
      margin-left: 8px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(74, 74, 74, 1);
      vertical-align: middle;
    }
  }

  .query-form {
    margin-top: 19px;
    padding: 30px 30px 7px 30px;
    background-color: #fff;

    /deep/ .el-input {
      width: 260px !important;
    }

    /deep/ .el-input__inner {
      height: 44px !important;
      line-height: 44px !important;
    }

    /deep/ .el-form-item {
      margin-bottom: 23px !important;
    }
  }

  .conditions {
    margin-top: 20px;
    padding: 18px 12px 18px 24px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .condition {
      display: flex;

      .btn {
        margin-left: 28px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #959595;
        text-align: center;

        &:nth-child(1) {
          margin-left: 0px !important;
        }
      }

      .btn-active {
        color: #000000 !important;
      }
      .sort-icon{
        display: flex;
        flex-direction: column;
        margin-left:5px;
        margin-right:5px;
        justify-content: center;
        .up-icon{
          width:12px;
          height:6px;
        }
        .down-icon{
          width:12px;
          height:6px;
          margin-top:2px;
        }
      }
    }
    .result-box{
      .result{
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        vertical-align: middle;
        .total{
          font-family: Helvetica, Helvetica;
          font-weight: 400;
          font-size: 14px;
          color: #EF1F1F;
        }
       
      }
      .paging{
          margin-left:21px;
          font-family: Helvetica, Helvetica;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          vertical-align: middle;
          .current{
            font-family: Helvetica, Helvetica;
            font-weight: 400;
            font-size: 14px;
            color: #EF1F1F;
          }
         
        } 
        .left-img{
            width: 24px;
            height:24px;
            margin-left:16px;
            vertical-align: middle;
          }
          .right-img{
            margin-left:5px;
            width: 24px;
            height:24px;
            vertical-align: middle;
          }
    }
  }
}
</style>
